<template>
  <div>
    <div style="margin-top: 5%">
      <div class="avator_box" style="float:left;">
        <img class="avator_img" src="../../assets/img/李知恩.jpg" alt="" />
      </div>
      <div class="resume_box" style="float:left;margin-left: 500px">
        <h1>浅墨临汐</h1>
        <p style="font-size: 5px">个人简介:谢谢谢谢谢寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻寻</p>
        <div>
          <span>专辑: xxx  | </span>
          <span>单曲: xxx  | </span>
          <span>MV: xxx</span>
        </div>
      </div>
    </div>
    <div>
      <div style="float:left;margin-left: 400px">
        <button class="btn" >
          <img class="btn_img" src="../../assets/img/播放.png" alt="全部播放">
          全部播放
        </button>
      </div>
      <div style="float:left; margin-left: 200px">
      <button class="btn">
        <img class="btn_img" src="../../assets/img/上传_o.png" alt="上传音乐">
        上传音乐
      </button>
      </div>
    </div>
    <div>
        <el-table
            ref="multipleTable"
            :data="tableData"
            style="float:left;margin-left:30%;width:75%;color:#608bd2;"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              label="歌名"
              prop="song">
          </el-table-column>
          <el-table-column
              label="歌手"
              prop="singer"
              width="90%">
          </el-table-column>
          <el-table-column
              label="时长"
              prop="duration"
              width="90%">
          </el-table-column>
        </el-table>
    </div>
  </div>
</template>



<script>
export default {
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 0) {
        return 'odd';
      }else{
        return 'even'
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  data() {
    return {
      multipleSelection: [],
      tableData: [
      {
        song: 'xxxx',
        singer: '浅墨临汐',
        duration: '03:39',
      },
      {
        song: 'xxxx',
        singer: '浅墨临汐',
        duration: '03:39',
      },
      {
        song: 'xxxx',
        singer: '浅墨临汐',
        duration: '03:39',
      },
      {
        song: 'xxxx',
        singer: '浅墨临汐',
        duration: '03:39',
      },
      {
        song: 'xxxx',
        singer: '浅墨临汐',
        duration: '03:39',
      },
      {
        song: 'xxxx',
        singer: '浅墨临汐',
        duration: '03:39',
      },
      {
        song: 'xxxx',
        singer: '浅墨临汐',
        duration: '03:39',
      },
      ]
    }
  }
}
</script>


<style scoped>
.avator_box {
  height: 200px;
  width: 200px;
  border: 3px solid #eee;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 0 10px #ddd;
  transform: translate(200%, 10%);
}
.avator_img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: #eee;
}
h1,p,span{
  color: #608bd2;
}

.resume_box {
  margin-top: 50px;
  height: 200px;
  width: 400px;
  margin-left: 200px;
}

.btn_img{
  height: 30px;
  width: 30px;
  display: inline-block;
  left: 5px;
}

.btn{
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: white; /* Green */
  border: none;
  color: black;
  padding: 10px 80px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  border-radius: 30px;
  display:flex;
  flex-direction:row;
  align-items:center;
}

</style>